<template>
  <div class="chart-container" ref="chartRef"></div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
// 新增导入 echarts-wordcloud 库
import 'echarts-wordcloud'

const chartRef = ref(null)
let chartInstance = null

onMounted(() => {
  nextTick(() => {
    initChart()
    window.addEventListener('resize', handleResize)
  })
})

const initChart = () => {
  chartInstance = echarts.init(chartRef.value)

  const data = [
    { name: '牙龈炎', value: 10000 },
    { name: '牙周炎', value: 6181 },
    { name: '牙龈出血', value: 4382 },
    { name: '牙结石', value: 3055 },
    { name: '牙龈萎缩', value: 2467 },
    { name: '牙齿松动', value: 1898 },
    { name: '口臭', value: 1484 },
    { name: '牙周脓肿', value: 1112 },
    { name: '根分叉病变', value: 865 },
    { name: '牙龈增生', value: 732 },
    { name: '牙槽骨吸收', value: 620 },
    { name: '牙菌斑', value: 532 },
    { name: '牙本质敏感', value: 476 },
    { name: '刷牙出血', value: 398 },
    { name: '咬合无力', value: 387 }
  ]

  const option = {
    title: {
      text: '牙周病统计词云图',
      left: 'center'
    },
    tooltip: {},
    series: [
      {
        type: 'wordCloud',
        gridSize: 2,
        sizeRange: [12, 50],
        rotationRange: [-90, 90],
        shape: 'circle',
        textStyle: {
          normal: {
            color: function () {
              return (
                'rgb(' +
                [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') +
                ')'
              )
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: data
      }
    ]
  }

  chartInstance.setOption(option)
}

const handleResize = () => {
  chartInstance && chartInstance.resize()
}

// const onUnmounted = () => {
//   window.removeEventListener('resize', handleResize);
//   chartInstance && chartInstance.dispose();
// };
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 300px;
}
</style>
